<template>
  <div>
    <div class="outDiv">
      <div class="backToPer">
        <headerBack></headerBack>
      </div>
      <scroller lock-x>
        <div :class="['mainDiv', hideHeader ? 'noPaddingTop' : '']">
          <div class="catalog_title">
            <div class="catalog_name">{{ catalogName }}</div>
            <div class="catalog_code">专业代码 {{ catalogCode }}</div>
          </div>
          <div class="chooseTab">
            <div :class="['marjors', tabItem == 1 ? 'active' : '']" @click="chooseTabItem(1)">专业列表</div>
            <div class="line">|</div>
            <div :class="['schools', tabItem == 2 ? 'active' : '']" @click="chooseTabItem(2)">推荐院校排名</div>
          </div>

          <!-- 专业列表 -->
          <ul class="major_lists" v-show="tabItem == 1">
            <li class="major_item" v-for="(item, index) of majorsList" :key="index" @click="jumpToDetail(item.major_code)">
              <div class="major_left">
                <div class="name">{{ item.major_name }}</div>
                <div class="code">{{ item.major_code }}</div>
              </div>
              <div class="major_right"></div>
            </li>
          </ul>

          <!-- 推荐院校列表 -->
          <ul class="school_lists" v-show="tabItem == 2">
            <li class="school_item" v-for="(item, index) of schools" :key="index" @click="jumpToUni(item.academy_code)">
              <div class="school_left">{{ item.academy_name }}</div>
              <div class="school_right">
                <span>{{ item.score }}</span>
                <i></i>
              </div>
            </li>
          </ul>
        </div>
      </scroller>
      <BuyVip :xBuy="showBuyVip" :returnUrl="returnUrl" serverName="专业库查看详情" @handleCloseBuyDialog="handleCloseBuyDialog"></BuyVip>
    </div>
  </div>
</template>

<script>
import headerBack from '~/components/headerBack'
import { getbycatalogcode, getmajorlistbyname } from '~/api/repository'
import ls from 'store2'
import BuyVip from '~/components/BuyVip'
export default {
  components: {
    headerBack,
    BuyVip,
  },
  mounted() {
    this.$visit('MajorList/' + this.$route.query.type)
    this.$getVip()
    this.catalogName = this.$route.query.type
    this.getMajorListByName(this.catalogName)
    this.returnUrl = '/wx-yxk/#' + this.$route.fullPath
    ls.remove('majorDetailQueryData')

    if (ls.get('choTab') == 'school') {
      this.tabItem = 2
    } else {
      this.tabItem = 1
    }
  },
  data() {
    return {
      catalogName: '', // 专业类--名称
      catalogCode: null, // 专业类--代码
      majorsList: '', // 专业列表
      schools: null, // 推荐院校列表
      tabItem: 1, // tab选项   ---->   1: 专业列表  2：推荐院校排名
      showBuyVip: false,
      returnUrl: null,
      hideHeader: false,
    }
  },
  methods: {
    getMajorListByName(name) {
      getmajorlistbyname({ catalog_name: name }).then((res) => {
        const data = res.data[0]
        this.catalogCode = data.catalog_code
        this.majorsList = data.majors
        this.getRecommendSchools()
      })
    },
    handleCloseBuyDialog() {
      this.showBuyVip = false
    },
    chooseTabItem(status) {
      this.tabItem = status
      if (status == 2) {
        // 推荐院校排名
        ls.set('choTab', 'school')
        if (!this.schools) {
          // 如果推荐院校列表为空的时候，查询推荐院校。
          this.getRecommendSchools()
        }
      } else {
        ls.set('choTab', 'major')
      }
    },
    // 获取推荐院校
    getRecommendSchools() {
      this.$loading('open')
      getbycatalogcode({ catalog_code: this.catalogCode })
        .then((res) => {
          if (res.code == 200) {
            this.schools = res.data
          } else {
            this.$vux.toast.text('网络故障，请重试~')
          }
          this.$hideLoading()
        })
        .catch((error) => {
          this.$vux.toast.text(error)
          this.$hideLoading()
        })
    },
    // 跳转到院校
    jumpToUni(code) {
      this.$router.push({ path: '../yxk/academyDetail?academyCode=' + code + '&gobackwx=true' })
    },
    // 跳转到专业详情
    jumpToDetail(code) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        const params = {
          typeId: ls.get('userType'),
          code: code,
        }
        this.$router.push({
          path: '/professional/detail',
          query: {
            type: JSON.stringify(params),
            mini_token: this.commonJs.GetUrlParam('mini_token'),
          },
        })
      } else {
        let isVipstrs = sessionStorage.getItem('isVipStr')
        // if (isVipstrs.indexOf("专业库")>-1) {  //疫情期间注释掉vip判断
        const params = {
          typeId: ls.get('userType'),
          code: code,
        }
        this.goto('/professional/detail', JSON.stringify(params))
        // } else {
        //   this.showBuyVip = true
        // }
      }
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  /deep/ .top {
    background: #fff;
  }

  .backToPer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 100;
  }

  .mainDiv {
    padding-top: 0.8rem;

    .catalog_title {
      background: #fff;
      padding: 0.32rem;
      margin-bottom: 0.24rem;

      .catalog_name {
        color: #222;
        font-size: 0.36rem;
        line-height: 0.57rem;
        font-weight: bold;
        margin-bottom: 0.16rem;
      }

      .catalog_code {
        color: #999;
        font-size: 0.24rem;
        line-height: 0.33rem;
      }
    }

    .chooseTab {
      background: #fff;
      padding: 0.32rem;
      border-bottom: 1px solid #e5e8ed;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .marjors,
      .schools {
        color: #999;
        font-size: 0.3rem;
        line-height: 0.4rem;
        font-weight: normal;
      }

      .active {
        font-weight: bold;
        color: @mainColor;
      }

      .line {
        margin: 0 0.32rem;
        color: #e5e8ed;
      }
    }

    .major_lists {
      background: #fff;
      padding: 0 0.32rem 1rem;

      .major_item {
        height: 1.12rem;
        line-height: 1.12rem;
        width: 100%;
        border-bottom: 1px solid #e5e8ed;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .major_left {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .name {
            color: #222;
            font-size: 0.32rem;
            font-weight: bold;
          }

          .code {
            color: #999;
            font-size: 0.26rem;
            margin-left: 0.24rem;
          }
        }

        .major_right {
          width: 0.4rem;
          height: 0.4rem;
          display: inline-block;
          background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
          background-size: 3rem 2.4rem;
        }
      }
    }

    .school_lists {
      background: #fff;
      padding: 0 0.32rem 1rem;

      .school_item {
        height: 1.12rem;
        line-height: 1.12rem;
        width: 100%;
        border-bottom: 1px solid #e5e8ed;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .school_left {
          color: #222;
          font-size: 0.3rem;
          font-weight: bold;
        }

        .school_right {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          span {
            color: #999;
            font-size: 0.26rem;
            margin-right: 0.16rem;
          }

          i {
            width: 0.4rem;
            height: 0.4rem;
            display: inline-block;
            background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
            background-size: 3rem 2.4rem;
          }
        }
      }
    }
  }
  .noPaddingTop {
    padding-top: 0;
  }
}
</style>
